import {DISPLAY_TYPE} from "../../../../common/actions/FlowActions";
import DynamicGrid from "../DynamicPanel/DynamicGrid";
import React from "react";
import {convertMapToRow} from "../../../../common/view/DataUtils";
import {getRenders} from "../../../../common/agGridCellRender/renders";
import {isEmptyObj} from "../../../../utils/collectionUtils";
import ReactJson from "react-json-view";
import {getDisplayType} from "./modalPropertyUtils";
import {containsIgnoreCase} from "../../../../utils/stringUtils";
import {FlowForm} from "../form/FlowForm";


export function   getModalContent  (cellActionType, jsonData){
  const displayType = getDisplayType(cellActionType)
  const gridOptions = getModalGridProperties(jsonData, cellActionType)

  switch(displayType){
    case DISPLAY_TYPE.PROPERTY:return <DynamicGrid {...gridOptions} />;break;
    case DISPLAY_TYPE.JSON: return getJsonEditor(jsonData, cellActionType); break;
    default:return <div>Not support display type {displayType}</div>;
  }
}

const predefinedModalKeyValueViewConfig = [
  {headerName: "Name", field: 'key',colId: 'key', width: 200},
  {headerName: "Value", field: 'value',colId: 'value', width: 300},
]

const isActionEditable = (cellActionType) => {
  return containsIgnoreCase(cellActionType, "update")
}

export function getModalGridProperties (mapData, cellActionType){
  if(isEmptyObj(mapData)){
    return {}
  }

  if(isActionEditable(cellActionType)){
    predefinedModalKeyValueViewConfig[1]["editable"] = true
  }

  let gridOptions = {
    columnDef: predefinedModalKeyValueViewConfig,
    rowData: convertMapToRow(mapData),
    frameworkComponents: getRenders(),
    withHeader : false,
    context : {}
  }
  return gridOptions
}

export function getJsonEditor(jsonData, cellActionType){
  const isEditable = isActionEditable(cellActionType)

  const onEdit = isEditable ?(edit)=>{} : undefined
  const onAdd = isEditable ?(edit)=>{} : undefined
  const onDelete = isEditable ?(edit)=>{} : undefined
  return <div className="json_view_panel"><ReactJson
    src={jsonData}
    theme="monokai"
    onEdit={onEdit}
    onAdd={onAdd}
    onDelete={onDelete}
    collapseStringsAfterLength={10}
    collapsed={true}/></div>
}

export function getStepsToCreateFlow(){
  const steps = [{
    title: 'Flow Properties',
    content: <FlowForm/>,
  }, {
    title: 'Second',
    content: 'Second-content',
  }, {
    title: 'Last',
    content: 'Last-content',
  }];
  return steps
}

export function getStepsToCreateProcessProvider(){

}

export function getStepsToCreateProcess(){
  const steps = [{
    title: 'Flow Properties',
    content: <FlowForm/>,
  }, {
    title: 'Second',
    content: 'Second-content',
  }, {
    title: 'Last',
    content: 'Last-content',
  }];
  return steps
}

export function getStepsToCreateResource(){

}


